<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
        h1,div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>添加设备</h1>
        <div>
            <p>负责人(*) <input v-model="device.principal"/></p>
            <p>供应商(*) <input v-model="device.supplier"/></p>
            <p>品牌(*) <input v-model="device.brand"/></p>
            <p>所属楼宇(*)
                <select v-model="device.buildingId">
                    <option v-for="item in buildings" :key="item.id" :value="item.id">
                        {{item.name}}
                    </option>
                </select>
            </p>
            <p>安装日期(*) <input v-model="device.addTime"/></p>
            <p>
                <button @click="handleAddClick">添加</button>
                <button @click="handleBackClick">返回</button>
            </p>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                device: {
                    principal:'',
                    supplier:'',
                    brand:'',
                    addTime:''
                },
                buildings:[],
            },
            methods:{
                loadbuildings(){
                    axios.get('http://localhost:8080/building/all')
                        .then(res => {
                            this.buildings = res.data.data
                        })
                },
                handleBackClick(){
                    history.back()
                },
                handleAddClick(){
                    if(this.device.principal == '' ||
                        this.device.supplier == '' ||
                        this.device.brand == '' ||
                        this.device.addTime == ''){
                        alert('请完整填写内容')
                        return
                    }

                    axios.post('http://localhost:8080/device/add',this.device)
                    .then(res => {
                        if(res.data.success){
                            alert('新增成功')
                            location.href='index.html'
                        }
                    })
                }
            },
            created(){
                this.loadbuildings()
            }
        })
    </script>
</body>
</html>